<template>
  <div class="plugin-miravia-home">
    <div class="bar">
      <div class="right">
        <t-button theme="success" @click="onRefresh">
          <template #icon>
            <t-icon name="shield-error" />
          </template>
          {{ plugin.t('auth.refresh') }}
        </t-button>
      </div>
    </div>
    <div class="box" v-loading="loading">
      <div class="bg-box">
        <div class="title">{{ plugin.t('home.title') }}</div>
        <t-descriptions :column="2">
          <t-descriptions-item :label="plugin.t('home.id')">{{ data.seller_id }}</t-descriptions-item>
          <t-descriptions-item :label="plugin.t('home.code')">{{ data.short_code }}</t-descriptions-item>
          <t-descriptions-item :label="plugin.t('home.email')">{{ data.email }}</t-descriptions-item>
          <t-descriptions-item :label="plugin.t('home.name')">{{ data.name }}</t-descriptions-item>
          <t-descriptions-item :label="plugin.t('home.company')">{{ data.name_company }}</t-descriptions-item>
          <t-descriptions-item :label="plugin.t('home.location')">{{ data.location }}</t-descriptions-item>
          <t-descriptions-item :label="plugin.t('home.refresh_expires_in')">{{ app.time.load(auth.refresh_expires_in).date() }}</t-descriptions-item>
          <t-descriptions-item :label="plugin.t('home.expires_in')">{{ app.time.load(auth.expires_in).date() }}</t-descriptions-item>
        </t-descriptions>
      </div>
    </div>
  </div>
</template>
<script setup>
  import { ref } from 'vue'
  import app from '@/app'
  import index from '../../index'
  import miraviaStore from '../../store'
  import { seller } from '@/api/provider/miravia'

  const plugin = index.plugin
  const data = ref({})
  const auth = miraviaStore.data
  const loading = ref(true)

  const onRefresh = () => {
    miraviaStore.ok.value = false
  }

  const getData = () => {
    seller().then(res => {
      data.value = res
    }).catch((res) => {
      app.message('warning', plugin.message('auth.message.error.' + res.message))
    }).finally(() => loading.value = false)
  }

  getData()
</script>
<style lang="scss">
  .plugin-miravia-home{
    .t-descriptions__body{
      width: 100%
    }

    .title{
      font-size: 16px;
      font-weight: bold; 
      padding-bottom: 20px;
    }
  }
</style>